<template>
  <div class="side_link">
    <div class="wrap">
      <div class="warp_img">
        <a href="https://t.me/www51ch" target="_blank"><img src="@/assets/Homepage_desktop/popup.png" alt="" /></a>
      </div>
    </div>
    <!-- vue动画组件 -->
    <transition name="fade">
      <div class="wrap" v-show="showgotop">
        <div class="warp_img">
          <img @click="GoTop" src="@/assets/Homepage_desktop/top.png" alt="" />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "sideLink",
  data() {
    return {
      showgotop: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.watchScroll);
  },
  methods: {
    watchScroll() {
      var sctop = document.documentElement.scrollTop || document.body.scrollTop;
      if (sctop > 100) {
        this.showgotop = true;
      } else {
        this.showgotop = false;
      }
    },
    GoTop() {
      (function smoothscroll() {
        var currentScroll =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (currentScroll > 0) {
          window.requestAnimationFrame(smoothscroll);
          window.scrollTo(0, currentScroll - currentScroll / 10);
        }
      })();
    },
  },
};
</script>

<style scoped>
.side_link {
  position: fixed;
  bottom: 100px;
  right: 0;
  width: 60px;
  height: 320px;
  z-index: 99;
}
.wrap {
  position: relative;
}
.warp_img>a>img {
  width: 60px;
  cursor: pointer;
}
.warp_img>img {
  width: 60px;
  cursor: pointer;
}
.handelHove {
  position: absolute;
  top: -20px;
  left: -80px;
  display: none;
}
.handelHove > img {
  width: 80px;
}
/* 鼠标移入显示二级菜单 */
.wrap:hover>.handelHove {
  display: block;
}

/* 动画样式 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>